<template>
    <div class="com_box flexbox flexcolumn height_100" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
        <AddVideoGroup/>
        <AddVideoRules/>
        <div class="strategy_head flexbox flexcenter flexbetween">
            <span class="font_16 color_01">广告组监测列表</span>
            <div class="flexbox flexcenter">
                <el-input placeholder="组名称，组ID" size="small" style="width:216px" clearable @change="getDataList(1)" prefix-icon="el-icon-search" v-model="queryInfo.query">
                </el-input>
                <el-button type="primary" style="margin-left:12px" size="small" icon="el-icon-circle-plus-outline" @click="addVideoGroup()">添加广告组</el-button>
            </div>
        </div>
        <div class="flex over_box table_box">
            <el-table :data="tableData" class="com_table" ref="straRef" height="100%">
                <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                    <img src="../../assets/img/null_icon.svg" alt="">
                    <div class="font_13 color_03">暂无数据</div>
                </div>
                <el-table-column prop="campaign_name" label="广告组名称" min-width="200">
                </el-table-column>
                <el-table-column prop="campaign_id" label="广告组ID" width="200">
                </el-table-column>
                <el-table-column prop="create_time" label="创建时间" width="200">
                </el-table-column>
                <el-table-column prop="cost" label="消耗" width="150">
                </el-table-column>
                <el-table-column prop="gmv" label="GMV" width="150">
                </el-table-column>
                <el-table-column prop="roi" label="ROI" width="150">
                </el-table-column>
                <el-table-column prop="status" label="开启状态" width="150">
                    <template slot-scope="scope">
                        <el-switch :value="scope.row.status" :active-value="1" :inactive-value="0" @change="switchPlan(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="segmentation_cost" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button type="text" style="padding:0" @click="addVideoRules(scope.row.video_testing_id)">托管</el-button>
                        <!-- <el-button type="text" style="padding:0" @click="viewStraLog(scope.row)">日志</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page_box flexbox flexcenter">
            <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :page-sizes="[20, 50, 100, 200]" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import AddVideoGroup from './AddVideoGroup'
import AddVideoRules from './AddVideoRules'
export default {
    name: "",
    data() {
        return {
            loading: false,
            queryInfo: {
                query: "",
                page: 1,
                limit: 20,
            },
            total: 0,
            setpage: 1,
            tableData: [],
        };
    },
    created() {
        this.getDataList(1);
    },
    methods: {
        //获取列表
        async getDataList(page) {
            this.queryInfo.page = page;
            this.loading = true;
            const { data: res } = await this.$http.post(
                "videotest/videotesting/videoTestingList",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.tableData = res.data.list;
                this.total = res.data.count;
            }
        },


        // 添加广告组
        addVideoGroup(){
            const attr = {
                dialogVsb: true,
            };
            this.$bus.emit("addVideoGroup", attr);
        },

        // 添加规则组
        addVideoRules(video_testing_id){
            const attr = {
                dialogVsb: true,
                video_testing_id:video_testing_id
            };
            this.$bus.emit("addVideoRules", attr);
        },
       
        // 日志
        viewStraLog(row) {
            const attr = {
                dialogVsb: true,
                template_id: row.id,
                name:row.name
            };
            this.$bus.emit("viewStraLog", attr);
        },


        switchPlan(row) {
            let text = row.status == 1 ? "关闭" : "开启";
            this.$confirm(`请问是否${text}`, `${text}`, {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
            })
                .then(async () => {
                    let type = row.status == 1 ? 0 : 1;
                    const { data: res } = await this.$http.post(
                        "videotest/videotesting/videoTestingSwitch",
                        {
                            video_testing_id: row.video_testing_id,
                            status: type,
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.$message({
                            type: "success",
                            message: "操作成功",
                        });
                        this.getDataList(this.setpage);
                    }
                })
                .catch(() => {});
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getDataList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.setpage = val;
            this.getDataList(val);
        },
    },
    components: {
        AddVideoGroup,
        AddVideoRules
    },
};
</script>


<style scoped>
.time_rank {
    margin-top: 20px;
}

.table_box {
    padding: 0 20px;
}
.time_model {
    padding: 8px;
}

</style>

<style>

</style>

